<template>
    <div>
        <div class="topRow">
            <van-icon name="checked" v-if="reserveState === '2'" />
            <img src="../../../../assets/images/app_cancel.png" v-if="reserveState === '3' || reserveState === '4'" />
            <p>{{reserveStateName}}</p>
        </div>
        <div class="box">
            <div class="rowCon">
                <div class="top">
                    <p v-for="item in detailInfo" :key="item.title">
                        <label>{{ item.title }}</label>
                        <span>{{ item.value }}</span>
                    </p>
                </div>
                <div class="bottom">
                    <p v-for="item in bookInfo" :key="item.title">
                        <label>{{ item.title }}</label>
                        <span>{{ item.value }}</span>
                    </p>
                </div>
            </div>
            <div class="rowCon rowEnd" v-if="reserveState === '3' || reserveState === '4'">
                <p>
                    <label>取消原因</label>
                    <span>{{ cancelReason }}</span>
                </p>
            </div>    
        </div>
        <div class="buttonMain" v-if="reserveState == '2'">
            <button @click="handleCancel" class="buttonC">
                取消预定
            </button>
        </div>
        <!-- 取消原因 -->
        <van-dialog v-model="showCancelModal" title="取消原因" show-cancel-button :beforeClose="handleSure">
            <van-field v-model="cancelFormData.cancelReason" rows="5" type="textarea" maxlength="256" placeholder="请输入取消原因" show-word-limit />
        </van-dialog>
        <full-loading v-if="fullLoading"></full-loading>
    </div>
</template>
<script>
    import { editBookState } from "@/api/srvAssurance/smarcatering/roomOrder";

    export default {
        data () {
            return {
                showCancelModal: false,
                fullLoading: false,
                reserveState: '',
                reserveStateName: '',
                cancelFormData: {
                    bookeId: '', // 取消标识
                    cancelReason: '', // 取消原因
                },
                detailInfo: [],
                bookInfo: [],
                cancelReason: ''
            }
        },
        methods: {
            // 查看详情
            handleDetail (item) {
                this.reserveState = item.reserveState;
                this.reserveStateName = item.reserveStateName;
                this.cancelFormData.bookeId = item.bookeId;
                this.cancelReason = item.cancelReason;
                this.detailInfo = [
                    {
                        title: "食堂名称",
                        value: item.canteenName,
                    },
                    {
                        title: "包间名称",
                        value: item.snugName,
                    },
                    {
                        title: "预定人数",
                        value: item.bookeNum,
                    },
                    {
                        title: "就餐日期",
                        value: item.reserveTime,
                    },
                    {
                        title: "预定餐次",
                        value: item.mealsTypeName,
                    }
                ];
                this.bookInfo = [
                    {
                        title: "预定人",
                        value: item.booker,
                    },
                    {
                        title: "预定部门",
                        value: item.deptName,
                    },
                    {
                        title: "预定时间",
                        value: item.createTime,
                    }
                ]
            },
            // 取消预定
            handleCancel () {
                this.$Dialog
                    .confirm({
                        title: "是否确定取消？",
                    })
                    .then(() => {
                        this.cancelFormData.cancelReason = '';
                        this.showCancelModal = true;
                    })
                    .catch(() => { });
            },
            // 确定取消
            handleSure (action, done) {
                if (action === 'confirm') {
                    done(false);
                    if (!this.cancelFormData.cancelReason) {
                        this.$Notify({ type: "warning", message: "请输入取消原因" });
                        return;
                    } else if (!this.$commonReg.textAreaReg.test(this.cancelFormData.cancelReason)) {
                        this.$Notify({ type: "warning", message: this.$commonReg.textAreaMsg });
                        return;
                    }
                    this.fullLoading = true;
                    editBookState(this.cancelFormData).then(res => {
                        this.fullLoading = false;
                        if (res.code === 1000) {
                            this.showCancelModal = false;
                            this.$Notify({ type: 'success', message: '取消成功！' });
                            this.$emit('close');
                            this.$emit('refresh');
                        }
                    }).catch(() => {
                        this.fullLoading = false;
                    });
                } else {
                    done();
                }
            },
        }
    }
</script>
<style lang="less" scoped>
    .topRow {
        height: 130px;
        background-color: rgb(254, 255, 255);
        text-align: center;
        .van-icon {
            color: #1aa78f;
            font-size: 48px;
            margin: 20px 0 20px;
        }
        img {
            background-image: url("../../../../assets/images/app_cancel.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 50px;
            width: 85px;
            margin: 20px auto 10px;
        }
        p {
            font-size: 17px;
            font-weight: 600;
        }
    }
    .box {
        padding: 10px;
        box-sizing: border-box;
    }
    .rowCon {
        background: #fff;
        margin-bottom: 10px;
        border-radius: 8px;
        padding: 10px 5px;
        box-sizing: border-box;
        p {
            display: flex;
            line-height: 28px;
            label {
                width: 75px;
                color: #999;
            }
            span {
                color: #333;
                flex: 1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        .top {
            border-bottom: 1px dashed #aaa;
            padding: 0 5px 10px;
            margin-bottom: 7px;
            position: relative;
            line-height: 22px;
        }
        .bottom {
            padding: 0 5px;
            box-sizing: border-box;
            margin-top: 10px;
            p span,
            p label {
                color: #999;
            }
        }
    }
    .rowEnd {
        padding: 10px;
    }
    .buttonMain {
        text-align: center;
        position: absolute;
        width: 100%;
        padding: 10px 0;
        right: 0px;
        bottom: 0px;
        height: 45px;
        z-index: 1;
        .buttonC {
            color: #ffffff;
            background-color: #f25454;
            border: 1px solid #f25454;
            border-radius: 20px;
            height: 45px;
            line-height: 45px;
            width: calc(100% - 20px);
            font-size: 17px;
        }
    }
</style>
